<template>
    <veiw class="contented">
        <view class="C_TOP">
            <view class="CT_Left" @click="checkItem">
                <view class="CT_gou">
                    <image v-if="item.isCheck" src="../static/image/gou-fill.png" class="gou" mode="scaleToFill" />
                    <image v-else src="../static/image/gou.png" class="gou" mode="scaleToFill" />
                </view>
                <image :src="baseUrl + item.pic" mode="scaleToFill" class="CT-Left" />
            </view>
            <view class="CT-Right">
                <view class="productName">{{ item.goodName }}</view>
                <view class="guige">
                    <view class="Name">规格：</view>
                    <view class="typeList">
                        <view style="margin-right: 10rpx;" v-for="(it, el) in item.productList" :key="el">{{ it }}</view>
                    </view>
                </view>
                <view class="priceBox">
                    <priceNumber :price="item.price"></priceNumber>
                    <up-number-box v-model="item.num" @change="valChange">
                        <template #minus>
                            <view class="minus">
                                <up-icon name="minus" size="12"></up-icon>
                            </view>
                        </template>
                        <template #input>
                            <text style="width: 50px;text-align: center;" class="input">{{ item.num }}</text>
                        </template>
                        <template #plus>
                            <view class="plus">
                                <up-icon name="plus" color="#F00" size="12"></up-icon>
                            </view>
                        </template>
                    </up-number-box>
                </view>
            </view>
        </view>
    </veiw>
</template>

<script setup>
import env from '@/config/common.js'
import { onMounted, ref } from 'vue';
import priceNumber from '@/components/priceNumber.vue'
let value = ref(1)
let emit = defineEmits(['check','num'])
let baseUrl = env.API_BASE_URL_DEV
let props = defineProps({
    item: {
        type: Object,
        default: () => { }
    }
})
const checkItem = ()=>{
    emit('check',{
        carId:props.item.carId,
        productId:props.item.productId,
        num:props.item.num,
        isCheck:!props.item.isCheck,
        deliveryType:props.item.deliveryType
    })
}
const valChange = (e) => {
    emit('num',{
        carId:props.item.carId,
        productId:props.item.productId,
        num:e.value,
        isCheck:props.item.isCheck,
        deliveryType:props.item.deliveryType
    })
}
</script>

<style lang="scss" scoped>
.contented {
    width: 100%;
    display: flex;
    padding: 15rpx 0;
    border-radius: 8rpx;
    box-sizing: border-box;
    flex-direction: column;
    background-color: #FFF;

    .C_TOP {
        display: flex;

        // margin-bottom: 70rpx;
        .CT_Left {
            display: flex;
            align-items: center;

            .CT_gou {
                margin: 0 30rpx;

                .gou {
                    width: 32rpx;
                    height: 32rpx;
                    display: block;
                }
            }

            .CT-Left {
                width: 160rpx;
                height: 160rpx;
                display: block;
                margin-right: 24rpx;
                border-radius: 8rpx;
            }
        }

        .CT-Right {
            flex: 1;
            display: flex;
            padding-right: 30rpx;
            flex-direction: column;
            justify-content: space-between;

            .productName {
                font-weight: 400;
                font-size: 32rpx;
                color: #111111;
                margin-bottom: 16rpx;
            }

            .guige {
                display: flex;
                align-items: center;

                .Name {
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #101010;
                }

                .typeList {
                    display: flex;
                    align-items: center;
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #666666;
                }
            }

            .priceBox {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
        }
    }

    .C-BOTTOM {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .CB_LEFT {
            display: flex;
            align-items: center;

            .CBLL {
                .gou {
                    width: 32rpx;
                    height: 32rpx;
                    display: block;
                }
            }

            .CBLR {
                margin-left: 16rpx;
            }
        }

        .CB_RIGHT {}
    }
}
</style>